<template>
	<view>
		<menuVue ref="menu" :style="'display:'+(cdopen ? 'block' : 'none')+';'"></menuVue>
		<view class="gcbox lt0" :class="gccl" :style="'display:'+dis + ';z-index:' + zindex" @click="clmeun">

			<!-- 登录和注册 -->
			<dlpageVue :tag="type" v-if="type == 1 || type == 2"></dlpageVue>
			<image src="/static/xx.png" class="lrxx" mode="widthFix" @click="clgc" v-if="type == 1 || type == 2">
			</image>

			<!--进入后的转盘-->
			<Zp1Vue v-if="type == 21"></Zp1Vue>
			<!--下载弹窗-->
			<downVue v-if="type == 22"></downVue>
			<!--钱雨-->
			<myVue v-if="type == 23"></myVue>
			<!-- 左边菜单和顶部登录后的小弹窗 -->
			<view class="poa w100 h100 lt0 bj_center" v-if="type == 24">
				<mtVue></mtVue>
			</view>

		</view>

	</view>

</template>

<script setup>
	import {
		ref,
		watch,
		provide,
		inject
	} from 'vue';
	import menuVue from './menu-slotsbr.vue';
	import dlpageVue from './dlpage-slotsbr.vue';
	import Zp1Vue from './slotsbr-zp1.vue';
	import downVue from './down.vue';
	import myVue from './my.vue';
	import mtVue from './mt.vue';
	let gccl = ref("")
	let dis = ref("none")
	// let gccl = ref("gc_open")
	// let dis = ref("block")
	let menu = ref(null)
	// 0菜单，1登陆，2注册，21登录后的转盘
	let type = ref(-99)
	// 盖层打开方式，1淡入淡出，2从上到下
	let optype = ref("1");

	let zindex = ref(999)
	let cdopen = ref(false)


	// 注册父级可调用的方法
	defineExpose({
		opgc,
		clgc
	})
	// 注册子集可调用的方法
	provide("opp", opp);
	provide("clgc", clgc);
	const ophd = inject("ophd");

	/**
	 * 打开盖层
	 * @param {Object} v 对应内容 0菜单，1登陆，2注册，21登录后的转盘，22下载弹窗，23金钱雨，24小弹窗
	 * @param {Object} t 打开方式 1淡入淡出，2从上到下
	 */
	function opgc(v, t) {
		optype.value = t
		type.value = v
		dis.value = "block"
		if (t == 2) {
			gccl.value = "gc_open2"
		} else {
			optype.value = 1
			gccl.value = "gc_open"
		}
		if (type.value == 0) {
			if (cdopen.value) {
				clgc();
			} else {
				cdopen.value = true
				menu.value.opmu()
				zindex.value = 999
			}
		} else if (type.value == 1 || type.value == 2 || type.value > 20) {
			zindex.value = 1001
			// 执行一次关闭菜单
			if (type.value != 0) {
				menu.value.clmu()
				cdopen.value = false
			}
		}

	}

	// 关闭盖层
	function clgc() {
		if (optype.value == 2) {
			gccl.value = "gc_cl2"
		} else {
			gccl.value = "gc_cl"
		}
		if (type.value == 0) {
			menu.value.clmu()
		}
		setTimeout(function() {
			dis.value = "none"
			if (type.value == 0) {
				cdopen.value = false
			}
			type.value = -1
		}, 300)
	}

	// 关闭菜单
	function clmeun() {
		if (type.value == 0) {
			clgc();
		}
	}


	function opp(v) {
		clgc()
		if (v == 0) {
			ophd(5)
		} else if (v == 1) {
			ophd(4)
		} else if (v == 2) {
			ophd(1)
		} else if (v == 3) {
			ophd(0)
		} else if (v == 4) {
			ophd(3)
		} else if (v == 5) {
			ophd(8)
		} else if (v == 6) {
			ophd(9)
		}
	}
</script>

<style lang="scss">
	/* PC端适配 */
	@media (min-width: 768px) {
		.gcbox {
			left: calc(50vw - 375rpx) !important;
			width: 750rpx !important;
			/* 与主容器同宽 */
		}
	}

	.gcbox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		/* 100% 相对于 #app 的宽度 */
		height: 100%;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		opacity: 0;
		background: rgba(0, 0, 0, 0.5);

		.gcmain {
			width: 100%;
			height: 100%;
		}

		.lrxx {
			width: 48rpx;
			position: absolute !important;
			top: 130rpx;
			right: 24rpx;
		}
	}

	.gc_open {
		-webkit-animation: gc_opend 0.3s 1 linear;
		animation: gc_opend 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes gc_opend {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.gc_cl {
		-webkit-animation: gc_cld 0.3s 1 linear;
		animation: gc_cld 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes gc_cld {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.gc_open2 {
		-webkit-animation: gc_open2d 0.3s 1 linear;
		animation: gc_open2d 0.3s 1 linear;
		animation-fill-mode: forwards;
		transform: translateY(100%);
		opacity: 1;
	}

	@keyframes gc_open2d {
		0% {
			transform: translateY(100%);
		}

		100% {
			transform: translateY(0%);
		}
	}

	.gc_cl2 {
		-webkit-animation: gc_cl2d 0.3s 1 linear;
		animation: gc_cl2d 0.3s 1 linear;
		animation-fill-mode: forwards;
		transform: translateY(0%);
		opacity: 1;
	}

	@keyframes gc_cl2d {
		0% {
			transform: translateY(0%);
		}

		100% {
			transform: translateY(100%);
		}
	}
</style>